<template>
  <div>
    <div class="BottomSelect">
      <el-row type="flex">
        <el-col :span="8">
          <div class="bottom_select_one">
            <div class="slider_title">
              <span class="slider_t_left">价格</span>
              <span class="slider_t_right">0-4000</span>
            </div>
            <!-- ¶Slider 滑块 -->
            <el-slider v-model="sliderValue" :max="4000" @change="moneySliderChange"></el-slider>
          </div>
        </el-col>
        <el-col :span="6" v-for="(item,key,index) of hotelOptions" :key="index">
          <div class="bottom_select">
            <div class="select_item_title">
              <p>{{hotelOptionsTitle[index]}}</p>
            </div>

            <el-dropdown>
              <span class="el-dropdown-link">
                不限
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <!-- dropdownScroll 溢出滑动  -->
              <el-dropdown-menu slot="dropdown" class="dropdownScroll">
                <!-- 第一个是选中 -->
                <el-dropdown-item
                  @click.native="optionsDropdownClick(key,dropdown,index2)"
                  :icon="+item.pitchOnArr.indexOf(dropdown) > -1 ? 'el-icon-star-on' : 'el-icon-star-off' "
                  v-for="(dropdown,index2) of item"
                  :key="index2"
                >{{dropdown.name}}</el-dropdown-item>
                <!-- 'el-icon-star-on':+item.pitchOnArr.indexOf(dropdown) > -1,
                'el-icon-star-off':!+item.pitchOnArr.indexOf(dropdown) < 0-->
                <!-- <el-dropdown-item icon="el-icon-star-on">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-star-off">狮子头</el-dropdown-item>-->
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 酒店选项
      hotelOptions: {},
      hotelOptionsTitle: ["住宿登记", "住宿类型", "酒店设施", "酒店品牌"],

      // Slider 滑块
      sliderValue: 0
    };
  },
  methods: {
    // 获取城市选项
    getOptions() {
      this.$axios({
        method: "get",
        url: "/hotels/options"
      }).then(res => {
        const { data } = res.data;
        this.hotelOptions = this.initOptions(data);
        // console.log("获取城市选项: ", data);
      });
    },
    // 处理城市选项
    initOptions(object) {
      for (const key in object) {
        if (object.hasOwnProperty(key)) {
          const item = object[key];
          (item.value = ""),
            // 选中的数组
            (item.pitchOnArr = []);
        }
      }
      return object;
    },
    // Dropdown 下拉菜单 选中项 已选中数组的操作
    optionsDropdownClick(key, dropdown, index) {
      // console.log("key: ", key);
      // console.log("index: ", index);
      // console.log("dropdown: ", dropdown);
      // 判断选中数据 是否已存在数组
      // 存在删掉 不存在 添加
      const isDropdownIndex = +this.hotelOptions[key].pitchOnArr.indexOf(
        dropdown
      );
      if (isDropdownIndex > -1) {
        // 存在
        this.$delete(this.hotelOptions[key].pitchOnArr, isDropdownIndex);
      } else {
        // 不存在
        this.hotelOptions[key].pitchOnArr.push(dropdown);
      }
      // 因为 是2层for 利用push等 需要对 2层修改完 在赋值 1层
      // 故此动态icon使用 三元表达式+强制渲染
      this.$forceUpdate();
      this.emitHotelData();
    },
    // 发送数据给外层
    emitHotelData() {
      const obj = this.hotelOptions;
      let strURL = "";
      // 酒店价格处理
      if (this.sliderValue != 0) {
        strURL += "price_in=" + this.sliderValue + "&";
      }
      // options选择器处理
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          const element = obj[key];
          strURL += this.setStrURL(key, element.pitchOnArr);
        }
      }

      // console.log("strURL: ", strURL);
      this.$emit('BottomFilter',strURL)
    },
    //  对拼接字符串的操作
    setStrURL(key, arr) {
      // console.log('arr.length<1: ', arr.length<1);
      if (arr.length < 1) {
        return "";
      }
      let keyName = "";
      if (key == "levels") {
        keyName = "hotellevel";
      } else if (key == "types") {
        keyName = "hoteltype";
      } else if (key == "assets") {
        keyName = "hotelbrand";
      } else if (key == "brands") {
        keyName = "hotelasset";
      }
      return this.setURLArr2Str(arr, keyName);
    },
    // URL 拼接 &的操作
    setURLArr2Str(arr, keyName) {
      let str = "";
      arr.forEach((item, index) => {
        // console.log('item: ', item);
        str += keyName + "=" + item.id + "&";
        // 最后一个不要➕&
      });
      return str;
    },
    // ? 价格选择
    moneySliderChange(value) {
      this.emitHotelData();
    }
  },
  mounted() {
    this.getOptions();
  }
};
</script>

<style lang="less" scoped>
// 查询 下部分
.BottomSelect {
  display: flex;
  align-items: center;
  border: 1px solid #dddddd;
  height: 80px;
  margin-bottom: 20px;
  box-sizing: border-box;
  /deep/ .el-row {
    flex: 1;
  }
  .bottom_select_one {
    padding: 0 20px;
    height: 65px;
    display: flex;
    flex-direction: column;
    .slider_title {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }
  }
  // 剩余4个 遍历
  .bottom_select {
    height: 65px;
    border-left: 1px solid #ddd;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .select_item_title {
      font-size: 14px;
    }
    /deep/ .el-dropdown {
      width: 145px;
      /deep/ .el-dropdown-link {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        font-size: 12px;
        &:focus {
          // 点击后的效果
          box-shadow: 0 0 6px #a6c7ff, 0 0 6px #a6c7ff;
        }
      }
    }
  }
}
// 鼠标上移后出现的选项框
/deep/ .el-dropdown-menu__item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 170px;
  i {
    padding-right: 10px;
  }
  /deep/ .el-icon-star-on {
    padding-right: 6px;
    color: gold;
    font-size: 18px;
  }
}
</style>

<style lang="less">
// 查询下部分
.el-dropdown-menu {
  width: 172px;
  height: 240px;
}
.dropdownScroll {
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>